<template>
  <f7-page
    :name="name"
    @page:init="onPageInit"
    @page:beforein="onPageBeforeIn"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
    @page:afterout="onPageAfterOut"
    @page:beforeremove="pageBeforeRemove"
  >
    <f7-toolbar bottom class="toolbar-one wechat-btn">
      <f7-link @click="add()">
        <span class="link-span">确定</span>
      </f7-link>
    </f7-toolbar>

    <div class="background menu-banner-div-height-auto">
      <img src="../../../static/images/banner.png" class="image" />
    </div>
    <div class="volunteer-title">课程管理系统</div>
    <form class="list inline-labels form-list">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label" style="width:90px">姓名</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="姓名" v-model.trim="username" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label" style="width:90px">手机号</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="手机号" v-model.trim="mobile" />
              </div>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner li-code">
            <div class="item-title item-label" style="width:90px">验证码</div>
            <div class="item-input-wrap">
              <input type="number" placeholder="请输入验证码" v-model.trim="captcha" />
            </div>
          </div>
          <div class="div-code">
            <f7-button
              fill
              :color="themeColor"
              id="register_code"
              class="RetrievePassword_btn"
              @click="RetrievePassword_getCode"
            >{{ ma_message }}</f7-button>
          </div>
        </li>
      </ul>
    </form>
  </f7-page>
</template>
<style>
.li-code {
  width: calc(100% - 100px) !important;
}

.div-code {
  width: 100px;
  height: 48px;
  position: relative;
}

.RetrievePassword_btn {
  text-align: center;
  border-radius: 5px;
  width: 90px;
  text-transform: lowercase !important;
  position: absolute;
  bottom: 8px;
}

.server-agreement-doc {
  width: 100%;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
}
</style>
<script>
import Log from "../../../mod/log.js";
import Consts from "../../../assets/consts";

import strings from "../../../assets/strings";
import cordova from "../../../js/cordova-app";

import Alert from "../../../mod/alert";
import Toast from "../../../mod/toast";

import Storage from "../../../mod/storage";
import AlertUtils from "../../../mod/utils.alert";
import ToastUtils from "../../../mod/utils.toast";
import Utils from "../../../js/mod.utils";
import StringUtils from "../../../js/mod.string";
import Http from "../../../js/mod.http";
import ConstantUtils from "../../../js/vue.constant";
import Popover from "../../../mod/popover";
import PickerUtils from "../../../mod/utils.picker";
import Dialog from "../../../js/vue.dialog";

const name = strings.page.wechat.bind.add;
const log = new Log(name);

export default {
  components: {},
  data() {
    return {
      name: name,
      lastBackTimestamp: new Date().getTime(),
      from: "add",

      banner: "../../../static/images/banner.png",
      themeColor: "green",
      code: "",
      ma_message: "获取验证码",
      num: 60,

      userinfo: {},

      username: "",
      mobile: "",
      captcha: "",
    };
  },
  computed: {},

  methods: {
    onCreated() {
      let _this = this;
      log.w("onCreated");
    },
    onMounted() {
      log.w("onMounted");
      var _this = this;
    },
    onPageInit() {
      var _this = this;
      let query = Utils.getParamData(_this);
    },
    onPageBeforeIn() {
      log.w("onPageBeforeIn");
      var _this = this;
    },
    onPageAfterIn() {
      log.w("onPageAfterIn");
      var _this = this;
      Utils.setTitle(_this, "课程管理系统");
      Utils.setBack(_this, function (e) {
        // _this.onBack();
        Utils.close_window(_this); // 关闭页面
      });
    },
    onAlertConfirm(dialog, e) {
      log.d("confirm", dialog, e);
    },
    onAlertCancel(dialog, e) {
      log.d("cancel", dialog, e);
    },
    onPageBeforeOut() {
      log.w("onPageBeforeOut");
    },
    pageBeforeRemove() {
      log.w("pageBeforeRemove");
      let _this = this;
    },
    onPageAfterOut() {
      log.w("onPageAfterOut");
    },
    onDestroyed() {
      log.w("onDestroyed");
    },
    onUpdated() {
      log.w("onUpdated");
    },
    onBack() {
      let _this = this;
      log.w("onBack");
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
    // 获取验证码
    codeBtn_num: function () {
      let _this = this;
      let num = _this.num;
      let str = "" + num + "s";
      _this
        .$$("#register_code")
        .removeClass("color-" + _this.themeColor)
        .addClass("color-gray");
      _this.ma_message = str;
      setTimeout(_this.setTimeOut, 1000);
    },
    setTimeOut: function () {
      let _this = this;
      let num = _this.num - 1;
      _this.num = num;
      if (num <= 0) {
        let str = "重新发送";
        _this.num = 60;
        let themeLoc = "green";
        _this
          .$$("#register_code")
          .removeClass("color-gray")
          .addClass("color-" + themeLoc);
        _this.ma_message = str;
      } else {
        let str = "" + num + "s";

        _this.ma_message = str;
        setTimeout(_this.setTimeOut, 1000);
      }
    },
    RetrievePassword_getCode: function () {
      let _this = this;
      let codebtnval = _this.ma_message;

      if (!(codebtnval == "获取验证码" || codebtnval == "重新发送")) {
        return false;
      }
      if (_this.mobile == null || _this.mobile == "") {
        Dialog.toast(_this, { text: "手机号不能为空" });
        return false;
      }
      if (!Utils.checkMobile(_this.mobile)) {
        Dialog.toast(_this, { text: "手机号格式不正确" });
        return false;
      }

      if (codebtnval == "获取验证码" || codebtnval == "重新发送") {
        let Data = {
          mobile: _this.mobile,
        };

        let params = {
          url: Http.kInterfacePath.user.captcha,
          data: Data,
          warn_error: "验证码发送失败！",
          success: _successRegister,
        };
        Http.ajax(_this, params);

        function _successRegister(res) {
          //已发送，正在倒计时 //res.data.captcha
          _this.codeBtn_num();
        }
      }
    },
    add: function () {
      var _this = this;
      var username = _this.username;
      var mobile = _this.mobile;
      var captcha = _this.captcha;

      if (_this.username == null || _this.username == "") {
        Dialog.toast(_this, { text: "姓名不能为空" });
        return false;
      }
      if (_this.mobile == null || _this.mobile == "") {
        Dialog.toast(_this, { text: "手机号不能为空" });
        return false;
      }
      if (!Utils.checkMobile(_this.mobile)) {
        Dialog.toast(_this, { text: "手机号格式不正确" });
        return false;
      }
      if (_this.captcha == null || _this.captcha == "") {
        Dialog.toast(_this, { text: "验证码不能为空" });
        return false;
      }

      let Data = {
        name: username,
        mobile: mobile,
        captcha: captcha,
      };

      let params = {
        url: Http.kInterfacePath.wechat.login,
        data: Data,
        success: _successFun,
      };
      Http.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          localStorage.setItem("mobile", mobile);
          _this.openid = mobile;
          _this.$f7.data.openid = mobile;
          _this.tipPage();
        }else if (res.result == 4) {
          ToastUtils.toast.show(ToastUtils.param.toast({ text: "验证码错误！" }));
        }  else {
          ToastUtils.toast.show(ToastUtils.param.toast({ text: "登录失败！" }));
        }
      }
    },

    // 跳转页面
    tipPage: function () {
      var _this = this;
      var model = _this.$f7.data.model;
      Utils.load(_this, "/edu-list/", {}, {});
    },
  },
  created() {
    this.onCreated();
  },
  updated() {
    this.onUpdated();
  },
  destroyed() {
    this.onDestroyed();
  },
  mounted() {
    this.onMounted();
  },
};
</script>
